<template>
  <div class="box">
      <div>
        <div class="top">
            <span>协会信息</span>
            <div />
            </div>
        <el-row :span="24" justify="start" type="flex">
          <el-col :span="10">
            <div class="title">
              <div class="font" style="margin-right:15px">简介:</div>
              <Editor v-model="form.introduction">
              </Editor>
            </div>
            <div class="title">
              <div class="font" style="margin-right:15px">章程:</div>
              <Editor v-model="form.constitution">
              </Editor>
            </div>
          </el-col>
        </el-row>
        <div  class="button">
        <el-button size="medium" @click="reset()">重置</el-button>
        <el-button 
          type="primary"
          size="medium"
          @click="submitForm"
          >提交</el-button>
        </div>
      </div>
  </div>
</template>
<script>
import { introduction,societyUpdate } from '@/api/society'
export default {
  data(){
    return{
      //提交参数
      form:{
        introduction:'',
        constitution:'',
        id:'',
      }
    }
  },
  created() {
    this.getIntroduction()
  },
  methods:{
    //获取协会简介,章程列表
    getIntroduction(){
      introduction().then(res=>{
        if(res.code == 200){
          this.form.introduction = res.data[0].introduction
          this.form.constitution = res.data[0].constitution
          this.form.id = res.data[0].id
        }
      })
    },
    //重置
    reset(){
      this.form = {
        introduction:'',
        constitution:'',
      }
    },
    submitForm(){
      let params = {
        ...this.form
      }
      societyUpdate(params).then(res=>{
        if(res.code == 200){
            this.$message({
            message: '修改成功',
            type: 'success'
          });
        }
      }
      )
    }
  }
}

</script>
<style scoped>
.box{
  padding:24px;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}
.box > div{
  background-color: white;
  padding: 24px;
}
.font{
  font-family: Alibaba PuHuiTi;
  font-size: 15px;
  color: #4F5570;
  font-weight: 400;
  margin-bottom: 20px;
}
.top{
  margin: 40px 0px 40px 56px;
  display: flex;
}
.top > span {
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  font-size: 16px;
  color: #000000;
  margin-left: 8px;
  width: 90px;
}
.top > div {
  border-bottom: 1px solid #e5e5e5;
  height: 15px;
  width: 100%;
  padding-bottom: -20px;
  margin-left: 15px;
}
.top::before {
  content: "";
  width: 3px;
  background: #2854b7;
  height: 20px;
  border-radius: 2px;
}
.title,.button,.label{
  margin-left:70px;
  margin-bottom: 30px;
}
.button el-button:first-child(){
  width:80px;
  line-height: 20px;
  height: 40px;
}
.button el-button:last-child(){
  margin-left: 30px;
  width:110px;
  height: 40px;
  border:none
}
</style>